@charset "UTF-8";
/*flex-direction属性决定主轴的方向（即项目的排列方向）。
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。*/
/*flex-wrap属性定义，如果一条轴线排不下，如何换行
nowrap（默认）：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方*/
// flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
/*justify-content属性定义了项目在主轴上的对齐方式
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。*/
/*align-items属性定义项目在交叉轴上如何对齐
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。*/
/*align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。*/
/*flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size） 它的默认值为auto，即项目的本来大小。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)*/
//align-self属性允许单个项目有与其他项目不一样的对齐方式
/*box-orient:  属性规定框的子元素应该被水平或垂直排列。
horizontal	在水平行中从左向右排列子元素
vertical	从上向下垂直排列子元素
inline-axis	沿着行内轴来排列子元素（映射为 horizontal）
block-axis	沿着块轴来排列子元素（映射为 vertical）
inherit	应该从父元素继承 box-orient 属性的值*/
/*box-direction 属性规定框元素的子元素以什么方向来排列。
normal	以默认方向显示子元素。	测试
reverse	以反方向显示子元素。	测试
inherit	应该从子元素继承 box-direction 属性的值*/
.flex {
    box-sizing: border-box;
    display: -webkit-flex;
    display: -webkit-box;
    display: flex;
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-flex-direction: row; //主轴为水平方向，起点在左端
    flex-direction: row;
    &.wrap {
        //换行，第一行在上方
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    &.wrap-reverse {
        //换行，第一行在上方
        -webkit-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
    }
    &.d-row-reverse {
        //主轴为水平方向，起点在右端。
        -webkit-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }
    &.d-col-reverse {
        //主轴为垂直方向，起点在下沿
        -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
    &.d-column {
        //主轴为垂直方向，起点在上沿
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    &.jc-start {
        //主轴的项目左对齐
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
    }
    &.jc-center {
        //主轴的项目居中
        -webkit-justify-content: center;
        justify-content: center;
    }
    &.jc-end {
        //主轴的项目右对齐
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }
    &.jc-around {
        //主轴的项目两侧的间隔相等
        -webkit-justify-content: space-around;
        justify-content: space-around;
    }
    &.jc-between {
        //两端对齐，项目之间的间隔都相等
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }
    &.ai-start {
        //交叉轴的起点对齐
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }
    &.ai-center {
        //交叉轴的中点对齐
        -webkit-align-items: center;
        align-items: center;
    }
    &.ai-end {
        //交叉轴的终点对齐
        -webkit-align-items: flex-end;
        align-items: flex-end;
    }
    &.ai-baseline {
        //项目的第一行文字的基线对齐
        -webkit-align-items: baseline;
        align-items: baseline;
    }
    &.ai-stretch {
        //(默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
        -webkit-align-items: stretch;
        align-items: stretch;
    }
    &.ac-start {
        //与交叉轴的起点对齐
        -webkit-align-content: flex-start;
        align-content: flex-start;
    }
    &.ac-center {
        //与交叉轴的终点对齐
        -webkit-align-content: center;
        align-content: center;
    }
    &.ac-end {
        //与交叉轴的中点对齐
        -webkit-align-content: flex-end;
        align-content: flex-end;
    }
    &.ac-around {
        //与交叉轴两端对齐，轴线之间的间隔平均分布
        -webkit-align-content: space-around;
        align-content: space-around;
    }
    &.ac-between {
        //每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
        -webkit-align-content: space-between;
        align-content: space-between;
    }
}
.flex-g-1 {
    box-sizing: border-box;
    -webkit-flex-grow: 1;
    -webkit-box-flex: 1;
    flex-grow: 1;
    -webkit-flex-basis: 0;
    flex-basis: 0;
    max-width: 100%;
}
.flex-col,
.flex-col-1,
.flex-col-10,
.flex-col-11,
.flex-col-12,
.flex-col-2,
.flex-col-3,
.flex-col-4,
.flex-col-5,
.flex-col-6,
.flex-col-7,
.flex-col-8,
.flex-col-9 {
    box-sizing: border-box;
    -webkit-flex: 0 0 auto;
    -webkit-box-flex: 0;
    flex: 0 0 auto;
}
.flex-col-1 {
    -webkit-flex-basis: 8.333%;
    flex-basis: 8.333%;
    max-width: 8.333%;
}
.flex-col-2 {
    -webkit-flex-basis: 16.667%;
    flex-basis: 16.667%;
    max-width: 16.667%;
}
.flex-col-3 {
    -webkit-flex-basis: 25%;
    flex-basis: 25%;
    max-width: 25%;
}
.flex-col-4 {
    -webkit-flex-basis: 33.333%;
    flex-basis: 33.333%;
    max-width: 33.333%;
}
.flex-col-5 {
    -webkit-flex-basis: 41.667%;
    flex-basis: 41.667%;
    max-width: 41.667%;
}
.flex-col-6 {
    -webkit-flex-basis: 50%;
    flex-basis: 50%;
    max-width: 50%;
}
.flex-col-7 {
    -webkit-flex-basis: 58.333%;
    flex-basis: 58.333%;
    max-width: 58.333%;
}
.flex-col-8 {
    -webkit-flex-basis: 66.667%;
    flex-basis: 66.667%;
    max-width: 66.667%;
}
.flex-col-9 {
    -webkit-flex-basis: 75%;
    flex-basis: 75%;
    max-width: 75%;
}
.flex-col-10 {
    -webkit-flex-basis: 83.333%;
    flex-basis: 83.333%;
    max-width: 83.333%;
}
.flex-col-11 {
    -webkit-flex-basis: 91.667%;
    flex-basis: 91.667%;
    max-width: 91.667%;
}
.flex-col-12 {
    -webkit-flex-basis: 100%;
    flex-basis: 100%;
    max-width: 100%;
}
.flex-col-offset-1 {
    margin-left: 8.333%;
}
.flex-col-offset-2 {
    margin-left: 16.667%;
}
.flex-col-offset-3 {
    margin-left: 25%;
}
.flex-col-offset-4 {
    margin-left: 33.333%;
}
.flex-col-offset-5 {
    margin-left: 41.667%;
}
.flex-col-offset-6 {
    margin-left: 50%;
}
.flex-col-offset-7 {
    margin-left: 58.333%;
}
.flex-col-offset-8 {
    margin-left: 66.667%;
}
.flex-col-offset-9 {
    margin-left: 75%;
}
.flex-col-offset-10 {
    margin-left: 83.333%;
}
.flex-col-offset-11 {
    margin-left: 91.667%;
}
